<template>
  <div class="component-container" v-if="docList.length">
    <span class="title">包含文档:</span>
    <ul class="doc-list">
      <li class="doc-item" v-for="(item, index) in docList" :key="index">
        <v-icon
          :name="getDocIcon(item.file_type)"
          remote
          class="file-type-icon"
        >
        </v-icon>
        <span
          class="text"
          :title="item.file_name"
          @click.stop="showPreviewFile(item)"
          >{{ item.file_name }}</span
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { getQueryVariable } from "@/utils";

const FILE_TYPE_ICON_MAP = {
  doc: "file_icon_word_light",
  docx: "file_icon_word_light",
  md: "file_icon_markdown_light",
  csv: "file_icon_excel_light",
  txt: "file_icon_text_light",
  xls: "file_icon_excel_light",
  xlsx: "file_icon_excel_light",
  ppt: "file_icon_ppt_light",
  pptx: "file_icon_ppt_light",
  pdf: "file_icon_pdf_light",
};

export const getFileIcon = (fileType) => {
  const defaultIconName = "file_icon_text_light";
  return FILE_TYPE_ICON_MAP[fileType] || defaultIconName;
};
export default {
  name: "related-doc.vue",
  props: {
    docList: Array,
  },
  data() {
    const botBizId = getQueryVariable("bot_biz_id");
    return {
      botBizId,
    };
  },
  mounted() {},
  methods: {
    getDocIcon: getFileIcon,
    async showPreviewFile(row) {
      let url = "";
      if (row.file_type === "md" || row.file_type === "txt") {
        let href = parent.window.location.href.split("#")[0];
        url = `${href}#/preview/md?id=${row.doc_biz_id}&botBizId=${this.botBizId}`;
      } else {
        url = `${window.location.origin}/preview?id=${row.doc_biz_id}&botBizId=${this.botBizId}`;
      }
      window.open(url, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.component-container {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  justify-content: flex-start;
  flex-flow: row nowrap;
  .title {
    color: var(--color-text-caption);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 133.333% */
    text-wrap: nowrap;
    align-self: flex-start;
    padding: var(--spacing-tight) 0;
  }
  .doc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    .doc-item {
      display: flex;
      padding: var(--spacing-tight) var(--spacing-base) var(--spacing-tight)
        var(--spacing-tight);
      align-items: center;
      gap: var(--spacing-tight);
      border-radius: var(--radius-large);
      background: var(--color-bg-1);
      /* shadow/--shadow-small-light */
      box-shadow: var(--shadow-small-light-x-1) var(--shadow-small-light-y-1)
          var(--shadow-large-light-blur-1) var(--shadow-small-light-spread-1)
          var(--shadow-small-light-color-1),
        var(--shadow-small-light-x-2) var(--shadow-small-light-y-2)
          var(--shadow-small-light-blur-2) var(--shadow-small-light-spread-2)
          var(--shadow-small-light-color-2),
        var(--shadow-small-light-x-3) var(--shadow-small-light-y-3)
          var(--shadow-small-light-blur-3) var(--shadow-small-light-spread-3)
          var(--shadow-small-light-color-3);
      .file-type-icon {
        width: 20px;
        height: 20px;
        padding: 1.667px 2.5px;
        border-radius: 1.5px;
      }
      .text {
        cursor: pointer;
        color: var(--color-text-primary);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 133.333% */
      }
    }
  }
}
</style>
